<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .tab {
            margin-top: 100px;
            margin-left: 100px;
            background-color: orange;
        }
        .tab_head {
            background-color: gainsboro;
        }
        tr td {
            padding: 0 30px;
        }
    </style>
</head>
<body>
   <table class="tab">
       <thead class="tab_head">
           <tr>
               <td>姓名</td>
               <td>科目</td>
               <td>成绩</td>
               <td>操作</td>
           </tr>
       </thead>
       <tbody class="tab_content">

       </tbody>
   </table>
<!-- js -->
   <script>
       //0.准备数据
       //定义一个构造方法
       function PersonInfo(user_name,type,result) {
           this.user_name = user_name;
           this.type = type;
           this.result = result;
       }
       var datas = 
       [new PersonInfo('魏璎珞','JavaScript',100),
       new PersonInfo('弘历','JavaScript',98),
       new PersonInfo('傅恒','JavaScript',99),
       new PersonInfo('明玉','JavaScript',88)];
       //1.获取头部标签
       var tab_head = document.querySelector('.tab_head');
       var tab_content = document.querySelector('.tab_content');
       for (var i = 0; i < datas.length; i++) {
           //1. 创建tr
           var tr = document.createElement('tr');
           tab_content.appendChild(tr);
            for(var key in datas[i]) {
               //创建td
               var td = document.createElement('td');
               td.innerHTML = datas[i][key];
               tr.appendChild(td);
            }
            //.创建删除按钮
            var td_remove = document.createElement('td');
            td_remove.innerHTML = "<a href=javascript:;>删除</a>"
            tr.appendChild(td_remove);
       }

       //该删除标签添加点击事件
       var as = tab_content.querySelectorAll('a');
       for (var i = 0; i < as.length; i++) {
           as[i].onclick = function() {
               //点击删除
               tab_content.removeChild(this.parentNode.parentNode);
           }
       }
   </script>
</body>
</html>